<template lang="pug">
  div.cycleTabWrapper
    div.tab-title-box
      a.tab-title(
        v-for="(tab, index) in tabs"
        :key="tab.key"
        :class="{active: curTab === tab.key}"
        :style="{'z-index': tabs.length - index}"
        @click="curTab = tab.key"
      ) {{tab.title}}
    .tab-content-box
      BreifRecipe(v-show="curTab === 'BreifRecipe'")
</template>
<script>
import { mapGetters } from 'vuex'
import { tabs } from './config'
import BreifRecipe from './components/briefRecipe'

export default {
  components: {
    BreifRecipe
  },
  data () {
    return {
      curTab: 'BreifRecipe',
      tabs
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
</style>
